<template>
	<view class="content">
		<view class="banner-box">
			<u-swiper :list="goodsInfo.slider_image" duration="1000" height="750" :circular="true"></u-swiper>
		</view>
		<view class="goods-info-box">
			<view class="goods-title-box">{{goodsInfo.store_name}}</view>
			<!-- <view class="goods-price-box">￥{{goodsInfo.price}}</view>
			<view class="goods-ku-box">
				<text>{{Boolean(parseInt(goodsInfo.ot_price))?`原价：￥${goodsInfo.ot_price}`:''}}</text>
				<text>销量：{{goodsInfo.sales}}件</text>
			</view> -->
		</view>
		<view class="center-goods-info-box">
			<view class="tarbar-list-box">
				<u-tabs :list="list" item-width="240" active-color="#181818" height="50" inactive-color="#868686"
					:is-scroll="true" :current="current" @change="change"></u-tabs>
			</view>
			<view class="goods-img-box">
				<u-parse v-if="current==0" :html="goodsInfo.introduction" :selectable="true"></u-parse>
				<u-parse v-if="current==1" :html="goodsInfo.instruction" :selectable="true"></u-parse>
				<u-parse v-if="current==2" :html="goodsInfo.specifications" :selectable="true"></u-parse>
			</view>
		</view>
		<view class="comment-list-plate-box">
			<view class="title-box">评价({{goodsInfo.evaluet_num}})</view>
			<view class="comment-item-plate-box" v-for="(item,index) in goodsInfo.evaluate" :key="index">
				<view class="user-info-box">
					<view class="user-head-box">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="user-name-box">
						<text>{{item.nickname}}</text>
						<u-rate :count="count" size="25" active-color="#FCC526" :disabled="true" v-model="item.star">
						</u-rate>
					</view>
				</view>
				<view class="user-comment-box">{{item.content}}</view>
				<view class="user-img-box">
					<block v-for="(newItem,newIndex) in item.image" :key="newIndex">
						<image :src="newItem.path" @click="bindImgPreview(newItem.path,item.image)" mode=""></image>
					</block>
				</view>
			</view>
			<view class="more-but-box" @click="goAllComment" v-if="goodsInfo.evaluet_num>0">查看更多</view>
			<view class="more-but-box" style="border: none;" v-else>暂无评论～</view>
		</view>
		<!-- <view class="bottom-but-box">
			<view class="left-but-box" @click="bindSele(0)">购物车</view>
			<view class="right-but-box" @click="bindSele(1)">立即购买</view>
		</view> -->
		<u-popup v-model="show" mode="bottom" border-radius="20" height="900" duration="200" :mask-close-able="false">
			<view class="popup-plate-box">
				<view class="top-plate-box">
					<view class="left-img-box">
						<image :src="isTrue||specItem.image==''?goodsInfo.image:specItem.image" mode=""></image>
					</view>
					<view class="right-txt-box">
						<text class="pr mb-20">￥{{isTrue?goodsInfo.price:specItem.price}}</text>
						<view class="guige-box mb-20">已选：<text>{{isTrue?'无':specItem.sku}}</text></view>
						<view class="guige-box">库存：<text>{{specItem.stock||0}}</text></view>
					</view>
					<view class="close-box" @click="show=false">
						<image src="/pageCart/static/icon3.png"></image>
					</view>
				</view>
				<view class="center-plate-box">
					<view class="title-box">选择规格</view>
					<scroll-view scroll-y="true" class="specs-list-box">
						<view class="item-box">
							<view :class="{active:cur==index}" v-for="(item,index) in goodsInfo.spec"
								@click="getSpec(item,index)">{{item.sku}}</view>
						</view>
					</scroll-view>
					<view class="sele-shop-box" @click="isPicker=true">
						<u-section title="选择店铺" :show-line="false" :sub-title="label!=''?label:'请选择'"></u-section>
						<u-picker v-model="isPicker" mode="selector" :default-selector="defaultSelector"
							:range="selectorObj" range-key="mer_name" @confirm="confirm"></u-picker>
					</view>
				</view>
				<view class="bottom-plate-box">
					<view class="buy-number-box">
						<view class="titles">
							<view>购买数量</view>
						</view>
						<view class="add-goods-box">
							<view class="reduce-box" @click="getNum(0)">
								<image :src="num<=1?'/static/cart_icon/icon8.png':'/static/cart_icon/icon5.png'"
									mode=""></image>
							</view>
							<text class="value">{{num}}</text>
							<view class="add-box" @click="getNum(1)">
								<image
									:src="num>=specItem.stock||isTrue?'/static/cart_icon/icon7.png':'/static/cart_icon/icon6.png'"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="but-box color-f f-30 fw-bold" @click="goPuy">{{status?'立即购买':'加入购物车'}}</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsInfo: {}, //商品信息
				// list: [{
				// 	name: '产品介绍'
				// }, {
				// 	name: '购买须知'
				// }, {
				// 	name: '规格介绍'
				// }],
				list: [{
					name: '产品介绍'
				}],
				current: 0, //tabs索引
				cur: null, //规格选中索引
				specItem: {}, //已选规格参数
				count: 5, //星数
				show: false, //商品参数选则弹框
				isPicker: false, //弹框
				selectorObj: [],
				label: "", //门店名称
				merId: 0, //门店ID
				num: 0, //数量
				status: 0, //状态
				defaultSelector: [0],
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: "加载中"
			});
			console.log('商品ID：', options.goodsId);
			this.merId = options.merId || ''
			this.goodsId = options.goodsId || ''
			this.getProductDetailData(options.goodsId || '');
		},
		computed: {
			isTrue() {
				return Object.keys(this.specItem).length == 0;
			}
		},
		methods: {
			// 获取规格信息
			getStockApi(mer_id) {
				const {
					goodsId: product_id
				} = this
				console.log(mer_id)
				console.log(product_id)
				const param = {
					mer_id,
					product_id
				}
				console.log(param)
				this.$u.api.getStockApi(param).then(res => {
					console.log(this.specItem)
					console.log(res)
					this.goodsInfo.spec = res.data
					if (this.specItem.unique) {
						const stock = res.data.find(item => item.unique == this.specItem.unique).stock
						this.num = stock? 1 : 0
						this.specItem.stock = stock
					}
				})
			},
			getProductDetailData(goodsId) {
				this.$u.api.productDetailApi({
					id: goodsId,
					mer_id: this.merId
				}).then(res => {
					if (res.code == 1) {
						console.log('商品数据：', res);
						res.data.slider_image.forEach(res => res.image = res.path);
						this.goodsInfo = res.data;
						this.selectorObj = this.goodsInfo.merchant;
						const fres = res.data.merchant.find(item => item.mer_id == res.data.mer_id)
						if (fres) {
							const index = res.data.merchant.findIndex(item => item.mer_id == res.data.mer_id)
							this.label = fres.mer_name;
							this.merId = fres.mer_id;
							this.defaultSelector = [index]
							this.getStockApi(fres.mer_id)
						}
					} else {
						this.$showToast(res.message || '获取商品信息失败！');
					}
				});
			},
			getSpec(item, index) { //选中的规格数据
				console.log(this.cur, index)
				if (this.cur == index) return
				this.cur = index;
				this.specItem = item;
				console.log(this.specItem, '----');
				this.num = item.stock? 1 : 0
			},
			bindImgPreview(current, list) { //图片预览
				console.log(current, '----', list);
				const urls = list.map(item => item.path);
				uni.previewImage({
					urls,
					current
				})
			},
			getNum(isTrue) { //得到商品数量
				if (isTrue) {
					if (this.num >= this.specItem.stock || Object.keys(this.specItem).length == 0) {
						return;
					}
					this.num++;
				} else {
					if (this.num <= 1) {
						return;
					}
					this.num--;
				}
			},
			bindSele(status) {
				if (uni.getStorageSync('isLogin')) {
					this.show = true;
					this.status = status;
				} else {
					this.$showToast('请登录');
					setTimeout(function() {
						// uni.reLaunch({
						//   url: '/pageMember/login/login'
						// })
						uni.navigateTo({
							url: '/pageMember/login/login'
						})
					}, 1500)
				}
			},
			goPuy() { //加入购物车/购买
				if (Object.keys(this.specItem).length == 0) {
					this.$showToast('请选择规格');
					return;
				} else if (!this.specItem.stock) {
					this.$showToast('库存不足');
					return;
				} else if (this.label == '') {
					this.$showToast('请选择店铺');
					return;
				} else if (this.num == 0) {
					this.$showToast('请选择至少一件商品');
					return;
				}
				let data = {
					id: this.goodsInfo.product_id,
					cart_num: this.num,
					unique: this.specItem.unique,
					mer_id: this.merId
				};
				if (!this.status) {
					this.$u.api.createCartApi(data).then(res => {
						if (res.code == 1) {
							this.$refs.uToast.show({
								title: res.message,
								position: 'center'
							});
							this.show = false;
						}
					});
				} else {
					data.type = 1;
					data.number = data.cart_num;
					data.product_id = data.id;
					delete data.cart_num;
					delete data.id;
					this.$gourl(`/pageCart/orderInfo/orderInfo?data=${JSON.stringify(data)}`);
				}
			},
			change(index) {
				this.current = index;
			},
			confirm(e) { //选中门店
				console.log(e)
				this.defaultSelector = e
				this.label = this.selectorObj[e[0]].mer_name;
				this.merId = this.selectorObj[e[0]].mer_id;
				// this.specItem = {}
				// this.cur = null
				this.getStockApi(this.merId)
			},
			goAllComment() { //所有评论
				this.$gourl(`./allComment?goodsId=${this.goodsInfo.product_id}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: calc(100vh - 130rpx);
		overflow: hidden;
		overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		background: #F5F5F5;

		.goods-info-box {
			padding: 40rpx 20rpx;
			padding-bottom: 20rpx;
			background: #fff;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;

			.goods-title-box {
				font-size: 42rpx;
				margin-bottom: 30rpx;
			}

			.goods-price-box {
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}

			.goods-ku-box {
				display: flex;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;

				text:first-child {
					flex: 0.5;
					display: block;
				}

				text:last-child {
					flex: 0.5;
					display: block;
					text-align: right;
				}
			}
		}

		.center-goods-info-box {
			background: #fff;
			margin-bottom: 20rpx;

			.tarbar-list-box {
				padding: 30rpx 0;
				display: flex;
				justify-content: center;
				box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.06);
			}

			.goods-img-box {
				width: 100%;
				padding: 40rpx 20rpx;

				// line-height: 0;
				image {
					width: 100%;
					height: 1112rpx;
					display: block;
					margin-bottom: 20rpx;
				}
			}
		}

		.comment-list-plate-box {
			padding: 30rpx 20rpx;
			background: #fff;

			.title-box {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.comment-item-plate-box {
				padding: 40rpx 0;
				padding-bottom: 0;

				.user-info-box {
					width: 100%;
					display: flex;

					.user-head-box {
						flex: 0.13;
						line-height: 0;

						image {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50rpx;
						}
					}

					.user-name-box {
						flex: 0.87;
						font-size: 26rpx;
						font-weight: bold;
						color: #333333;
						display: flex;
						flex-direction: column;
					}
				}

				.user-comment-box {
					padding: 20rpx 0;
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}

				.user-img-box {
					display: flex;
					flex-wrap: wrap;
					line-height: 0;

					image {
						width: 167rpx;
						height: 167rpx;
						border-radius: 10rpx;
						margin: 0 10rpx 10rpx 0;
					}
				}
			}
		}

		.more-but-box {
			border: 1rpx solid #000;
			width: 30%;
			margin: 40rpx auto;
			padding: 15rpx 20rpx;
			border-radius: 50rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}

		.bottom-but-box {
			position: fixed;
			bottom: 0;
			z-index: 100;
			width: 100%;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			background: #fff;
			font-size: 30rpx;
			font-weight: bold;

			.left-but-box {
				padding: 20rpx 0;
				width: 340rpx;
				text-align: center;
				border: 1rpx solid #000;
				border-radius: 50rpx;
				color: #111;
			}

			.right-but-box {
				padding: 20rpx 0;
				width: 340rpx;
				text-align: center;
				background: #000;
				border-radius: 50rpx;
				color: #fff;
			}
		}

		.popup-plate-box {
			.top-plate-box {
				position: relative;
				display: flex;
				padding: 20rpx;

				.left-img-box {
					flex: 0.28;
					line-height: 0;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
				}

				.right-txt-box {
					flex: 0.8;
					display: flex;
					flex-direction: column;
					// align-self: center;
					color: #333333;

					.pr {
						font-size: 32rpx;
						font-weight: bold;
					}

					.guige-box {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;

						text {
							color: #333333;
						}
					}
				}

				.close-box {
					line-height: 0;
					position: absolute;
					top: 20rpx;
					right: 20rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.center-plate-box {
				padding: 20rpx;
				padding-bottom: 0;

				.title-box {
					padding: 0 0 20rpx 0;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.specs-list-box {
					height: 270rpx;
					font-size: 24rpx;
					font-weight: 400;

					.item-box {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						view {
							display: block;
							padding: 18rpx 30rpx;
							background: #F5F5F5;
							margin: 0 20rpx 20rpx 0;
							border-radius: 10rpx;
						}
					}

					.active {
						background: #000 !important;
						color: #fff !important;
					}
				}

				.sele-shop-box {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #EDEDED;
				}
			}

			.bottom-plate-box {
				position: fixed;
				bottom: 20rpx;
				width: 100%;
				padding: 0 20rpx 20rpx 20rpx;

				.buy-number-box {
					padding: 30rpx 0;
					display: flex;
					align-items: center;
					color: #333;

					.titles {
						flex: 0.5;
						display: flex;
						font-size: 28rpx;
						font-weight: bold;
					}

					.add-goods-box {
						flex: 0.5;
						align-self: center;
						display: flex;
						justify-content: flex-end;
						font-size: 30rpx;
						font-weight: 400;
						color: #393B42;

						.value {
							width: 80rpx;
							height: 50rpx;
							line-height: 50rpx;
							font-size: 30rpx;
							text-align: center;
						}

						.reduce-box {
							image {
								width: 50rpx;
								height: 50rpx;
							}
						}

						// .active{border: 1rpx solid #CCC !important; color: #CCC !important;}
						.add-box {
							image {
								width: 50rpx;
								height: 50rpx;
							}
						}
					}
				}

				.but-box {
					width: 100%;
					padding: 25rpx 0;
					border-radius: 50rpx;
					text-align: center;
					background: #000;
				}
			}
		}
	}
</style>
